<template>
  <div class="comment-item">
    <div>
      <div class="comment-item-class">
        <div class="comment-header">
          <strong>{{ comment.usernameComment }}</strong> (ID: {{ comment.useridComment }})
        </div>
        <div class="comment-body">
          <p>{{ comment.content }}</p>
        </div>
      </div>
      <div class="comment-button">
        <el-button type="primary" @click="toComment">评论</el-button>
        <el-button type="danger" @click="toDelete">删除</el-button>
      </div>
    </div>
    <!-- 渲染子评论 -->
    <div v-if="comment.children && comment.children.length > 0" class="child-comments">
      <div v-for="(child, index) in comment.children" :key="index">
        <CommentItem :comment="child" @refresh="$emit('refresh', $event)" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import store from '@/store';
import request from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus';
import { defineProps, defineEmits } from 'vue';

// 定义传入的评论数据
const props = defineProps({
  comment: {
    type: Object as () => {
      commentid: number;
      blogid: number;
      useridComment: number;
      usernameComment: string;
      parentid: number;
      content: string;
      children?: Array<any>;
    },
    required: true,
  },

});
// 定义要发出的事件
const emit = defineEmits(['refresh']);



/**
 * @description: 点击增加评论
 * @Author: 梁晓雨
 * @Date: 2025-03-09 21:31:09
 */
const toComment = async () => {
  ElMessageBox.prompt('评论内容', '评论', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
    .then(async ({ value }) => {
      const userid = store.getters.getUser.userId;
      const username = store.getters.getUser.username;
      await request.post('/comment/add', {
        commentid: null,
        blogid: props.comment.blogid,
        useridComment: userid,
        usernameComment: username,
        parentid: props.comment.commentid,
        content: value,
        isDeletedComment: 0,
        children: null
      })
        .then(res => {
          ElMessage({
            type: 'success',
            message: '评论成功'
          })
        })
        .catch(error => {
          ElMessage({
            type: 'error',
            message: '评论失败'
          })
        })

      // 刷新评论区
        emit('refresh');
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消评论'
      })
    })
};

/**
 * @description: 用户是管理员时/评论是用户自己发的,删除该评论
 * @Author: 梁晓雨
 * @Date: 2025-03-09 22:40:13
 */
const toDelete = async () => {
  try {
    // emit('delete',props.comment.commentid);
    ElMessageBox.confirm(
      '请问您是否要删除该评论？',
      '确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        // 删除指定commentId的评论
        await request.delete('/comment/deleteById', {
          params: {
            id: props.comment.commentid
          }
        })
          .then(res => {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
          })
        // 触发父组件的刷新评论区函数
        emit('refresh');
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除'
        })
      })

  } catch (error) {
    ElMessage({
      message: '删除失败',
      type: 'error'
    })
  }
}

</script>

<style lang="scss" scoped>
@use './CommentItem.scss';
</style>